<template>
  <el-main>
    <el-row style="padding-top: 20px">
      <el-col
        :xs="{ span: 24, offset: 0 }"
        :sm="{ span: 14, offset: 5 }"
        :md="{ span: 12, offset: 6 }"
        :lg="{ span: 10, offset: 7 }"
        :xl="{ span: 12, offset: 6 }"
      >
        <span>请选择文件类型：</span>
        <el-radio-group v-model="radio" @change="change_type">
          <el-radio :label="3">图书</el-radio>
          <el-radio :label="6">图片</el-radio>
          <el-radio :label="9">视频</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>

    <el-row style="padding-top: 20px">
      <el-col
        :xs="{ span: 24, offset: 0 }"
        :sm="{ span: 14, offset: 5 }"
        :md="{ span: 12, offset: 6 }"
        :lg="{ span: 10, offset: 7 }"
        :xl="{ span: 12, offset: 6 }"
      >
        <el-input
          placeholder="请输入题目"
          v-model="title"
          type="textarea"
          autosize
        >
        </el-input>
      </el-col>
    </el-row>

    <el-row style="padding-top: 20px">
      <el-col
        :xs="{ span: 24, offset: 0 }"
        :sm="{ span: 14, offset: 5 }"
        :md="{ span: 12, offset: 6 }"
        :lg="{ span: 10, offset: 7 }"
        :xl="{ span: 12, offset: 6 }"
      >
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          multiple
          :accept="file_type"
          ref="upload"
          :file-list="fileList"
          :on-change="file_change"
          :on-remove="file_remove"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传相应类型的文件
            </div>
          </template>
        </el-upload>
      </el-col>
    </el-row>

    <el-row style="padding-top: 20px">
      <el-col
        :xs="{ span: 24, offset: 0 }"
        :sm="{ span: 14, offset: 5 }"
        :md="{ span: 12, offset: 6 }"
        :lg="{ span: 10, offset: 7 }"
        :xl="{ span: 12, offset: 6 }"
      >
        <el-button @click="upload">上传</el-button>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import store from "@/store";
import { request } from "../network/request";
import { ElLoading, ElMessage } from "element-plus";

export default {
  name: "PersonalPage",
  data() {
    return {
      userInfo: {},
      radio: 3,
      title: "",
      file_type: ".pdf",
      fileList: []
    };
  },
  methods: {
    file_change(file) {
      this.fileList.push(file);
    },
    file_remove(file, fileList) {
      this.fileList = fileList;
    },
    change_type() {
      if (this.radio === 3) {
        this.file_type = ".pdf";
      } else if (this.radio === 6) {
        this.file_type = ".jpg/.jpeg/.png";
      } else if (this.radio === 9) {
        this.file_type = ".mp4/.mp4/.flv";
      }
    },
    upload() {
      if (this.title !== "") {
        let loadingInstance = ElLoading.service({
          fullscreen: true,
          text: "文件上传中，请稍后..."
        });

        try {
          let title = this.title;
          if (title === "") {
            ElMessage.warning("请填写题目！");
            return false;
          }
          let formData = new FormData();
          formData.append("name", title);
          // console.log(formData.get("name"));
          this.fileList.forEach(file => {
            formData.append("file", file.raw);
          });
          if (this.radio === 3) {
            request({
              method: "post",
              url: "/api/file/uploadBook",
              headers: { "Content-Type": "multipart/form-data" },
              data: formData
            })
              // eslint-disable-next-line no-unused-vars
              .then(res => {
                // console.log("上传成功！");
                // console.log(res);
                ElMessage.success("上传成功！");
                loadingInstance.close();
                location.reload();
              })
              // eslint-disable-next-line no-unused-vars
              .catch(err => {
                ElMessage.error("上传失败");
                loadingInstance.close();
              });
          } else if (this.radio === 6) {
            request({
              method: "post",
              url: "/api/file/uploadPic",
              headers: { "Content-Type": "multipart/form-data" },
              data: formData
            })
              // eslint-disable-next-line no-unused-vars
              .then(res => {
                // console.log("上传成功！");
                // console.log(res);
                ElMessage.success("上传成功！");
                loadingInstance.close();
                location.reload();
              })
              // eslint-disable-next-line no-unused-vars
              .catch(err => {
                ElMessage.error("上传失败");
                loadingInstance.close();
              });
          } else if (this.radio === 9) {
            request({
              method: "post",
              url: "/api/file/uploadVideo",
              headers: { "Content-Type": "multipart/form-data" },
              data: formData
            })
              .then(res => {
                console.log(res);
                // console.log("上传成功！");
                // console.log(res);
                ElMessage.success("上传成功！");
                loadingInstance.close();
                location.reload();
              })
              // eslint-disable-next-line no-unused-vars
              .catch(err => {
                ElMessage.error("上传失败");
                loadingInstance.close();
              });
          }
        } catch (e) {
          alert(e);
          loadingInstance.close();
        }
      }
    },
    sign_out() {
      store.commit("signOut");
    }
  },
  created() {
    this.userInfo = store.getters.userInfo;
  }
};
</script>

<style scoped></style>
